<template>
    <div class="admin">
        <el-container style="height:100vh;">
            <el-aside class="el-aside" :width="asideWidth">
                <el-menu
                        default-active="1"
                        @open="handleOpen"
                        @close="handleClose"
                        :collapse="isUnfold"
                        :router="true"
                        class="el-menu">
                    <el-menu-item index="1" route="/admin/user">
                        <i class="el-icon-menu"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" route="/admin/office">
                        <i class="el-icon-menu"></i>
                        <span slot="title">机构管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" route="/admin/message">
                        <i class="el-icon-menu"></i>
                        <span slot="title">资讯消息</span>
                    </el-menu-item>
                    <el-menu-item index="4" route="/admin/messageType">
                        <i class="el-icon-menu"></i>
                        <span slot="title">消息类型</span>
                    </el-menu-item>
                    <el-menu-item index="5" route="/admin/supplies">
                        <i class="el-icon-menu"></i>
                        <span slot="title">物资管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="el-main">
                <el-container>
                    <el-header class="el-header">
                        <el-row type="flex" justify="space-between" >
                            <el-col :span="8">
                                <h6>校园物资管理系统</h6>
                            </el-col>
                            <el-col :span="4">
                                <span>未登录</span>
                            </el-col>
                        </el-row>
                    </el-header>
                    <el-main style="padding-top: 10px;">
                        <router-view></router-view>
                    </el-main>
                </el-container>
                <i class="icon" :class="isUnfold ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="asideUnfold"></i>
            </el-main>
        </el-container>
    </div>
</template>

<script>
  export default {
    name: "Admin",
    data(){
      return {
        isUnfold : false,
        asideWidth : "200px", // 展开300
      }
    },
    methods : {
      handleOpen(key , keyPath){
        console.log(key,keyPath);
      },
      handleClose(key , keyPath){
        console.log(key,keyPath);
      },
      asideUnfold(){
        this.asideWidth = this.isUnfold ? "200px" : "100px";
        this.isUnfold = !this.isUnfold;
      },
    }
  }
</script>

<style scoped lang="scss">
    .admin{
        /*width:100%;*/
        /*height:100%;*/
        .el-aside{
            background-color: white;
            transition: width linear 0.4s;
            overflow: hidden;
            .el-menu{
                width: 100%;
                height: 100vh;
            }
            .el-icon-menu{
                /*height: 100%;*/
                width: 100%;
                max-width: 40px;
                /*text-align: center;*/
            }

        }

        .el-main{
            padding: 0;

            position: relative;
            .icon{
                position: absolute;
                top: 0px;
                left: 0px;
                color: white;
                font-size: 24px;
                height: 60px;
                line-height: 60px;
            }


        }
        .el-header{
            background-color: #409EFF;
            height: 60px;
            color: white;

            & > *{
                height: 60px;
                line-height: 60px;
            }
            h6{
                height: 60px;
                margin: 0;
                font-size: 16px;
                padding: 0px 10px;
            }

        }
    }
</style>
